<template>
  <view class="online-homework">
    <back :back-title="backTitle" class="back"></back>
    <view class="list">
			<view class="item" @click="handleClick(index)" v-for="(item,index) of list" :key="index">
				<image :src="checkProject(item.dictName)"></image>
				<uni-badge v-if="item.count" class="badge" :text="item.count" type="error"></uni-badge>
				<view class="desc">{{item.dictName}}</view>
			</view>
		</view>
  </view>
</template>

<script>
import uniBadge from "@/components/uni-badge/uni-badge.vue"
import {onlinehomeworkList} from '../../api/homework'
export default {
  name: 'onlineHomework',
	components: {
		uniBadge
	},
  data() {
    return {
			backTitle: '在线作业',
			list: []
    }
	},
	onReady() {
		this.initList()
	},
	methods: {
		handleClick(index) {
			if(index > 0) return
			uni.navigateTo({
				url: '/pages/online-homework/children/online-homework-list/index',
				animationType: 'pop-in'
			})
		},
		async initList() {
			uni.showLoading({
				title: '加载中'
			})
			const dictState = 3
			const res = await onlinehomeworkList({dictState})
			uni.hideLoading()
			this.list = res
		},
		checkProject(dictName) {
			const dicts = ['语文', '数学', '英语', '地理', '物理', '化学', '生物', '政治', '历史', '体育', '美术', '信息技术']
			const enDicts = ['language', 'mathematics', 'english', 'geography', 'physics', 'chemistry', 'biology', 'politics', 'history', 'sports', 'art', 'IT']
			const index = dicts.findIndex((item) => {
				return item === dictName
			})
			return `/static/images/work/${enDicts[index]}.png`
		}
	}
}

</script>
<style lang='scss' scoped>
.online-homework{
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
	.back{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}
}
.list{
  width: 100%;
  padding: 175upx 20upx 0;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
	.item{
		width: 185upx;
		position: relative;
		margin-bottom: 50upx;
		image{
			width:185upx;
			height:264upx;
			border-radius:10upx;
		}
		.desc{
			font-size:30upx;
			color: #333;
			line-height: 94upx;
			text-align: center;
		}
		.badge{
			width: 40upx;
			height:40upx;
			position: absolute;
			right: -20upx;
			top:-20upx;
			z-index: 2;
		}
	}
}
</style>